<template>
  <div class="container">
    <div class="top_content">
      <!-- 天气预报 -->
      <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=ta&skin=pitaya"
       frameborder="0" width="350" height="20" allowtransparency="true" >
       </iframe>

      <!-- 预览图 -->
      <img
        class="pre_image"
        src="../assets/images/pre_image.jpg"
        alt="无法显示"
      />
      <count-down hr="2" min="2" sec="2"></count-down>
    </div>

    <div class="iconList">
      <div v-for="(item, index) of iconList" :key="index">
        <img :src="require(`../assets/images/${item.icon}.png`)" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>

    <!-- 精选背景 -->
    <v-title :title="titleList.title1"></v-title>
    <div class="backgroundImg">
      <div style="width: 48%">
        <div v-for="(item, index) of backgroundImgList1" :key="index">
          <img :src="backgroundImgList1[index]" alt="" />
        </div>
      </div>
      <div style="width: 48%">
        <div class="uploadImg">
          <img :src="require(`../assets/images/photo.png`)" alt="" />
          <div class="text">自己传图</div>
        </div>
        <div v-for="(item, index) of backgroundImgList2" :key="index">
          <img :src="backgroundImgList2[index]" alt="" />
        </div>
        <div class="moreImg">更多美图</div>
      </div>
    </div>

    <!-- 精选阅读 -->
    <v-title :title="titleList.title2"></v-title>
    <v-card :cardList="cardList"></v-card>
  </div>
</template>

<script>
import title from "@/common/title";
import card from "@/common/card";
import CountDown from '../common/count-down.vue';
export default {
  components: { "v-title": title, "v-card": card ,CountDown},
  name: "index",
  data() {
    return {
      iconList: [
        {
          name: "换图",
          icon: "changeImage",
        },
        {
          name: "提醒",
          icon: "remind",
        },
        {
          name: "积分",
          icon: "integral",
        },
        {
          name: "成就",
          icon: "achievement",
        },
      ],
      titleList: {
        title1: "精选背景",
        title2: "精选阅读",
      },
      cardList: [
        {
          imgUrl: require("../assets/images/card_001.jpg"),
          intro: "好的页面设计并不始于图片，而是始于对人的理解",
          time: "2021-06-21",
        },
        {
          imgUrl: require("../assets/images/card_002.jpg"),
          intro: "将已知的事件陌生化，更是一种创造",
          time: "2021-06-10",
        },
        {
          imgUrl: require("../assets/images/card_003.jpg"),
          intro: "不要在家里放一件你不知道的东西，或者你不喜欢的东西",
          time: "2021-06-21",
        },
      ],
      backgroundImgList1: {
        img1: require("../assets/images/img_001.jpg"),
        img2: require("../assets/images/img_002.jpg"),
        img3: require("../assets/images/img_003.jpg"),
        img4: require("../assets/images/img_004.jpg"),
      },
      backgroundImgList2: {
        img1: require("../assets/images/img_005.jpg"),
        img2: require("../assets/images/img_006.jpg"),
        img3: require("../assets/images/img_007.jpg"),
      },
    };
  },
};
</script>


<style scoped>
.backgroundImg {
  display: flex;
  justify-content: space-between;
}
.backgroundImg img {
  width: 100%;
  height: 350px;
  border-radius: 15px;
  margin-bottom: 30px;
}
.uploadImg {
  width: 100%;
  height: 155px;
  border: 2px dashed rgb(255, 206, 132);
  background-color: rgba(255, 206, 132, 0.1);
  border-radius: 10px;
  margin-bottom: 30px;
  color: rgb(248, 178, 72); 
  text-align: center;
}
.uploadImg img {
  height: 50px;
  width: 50px;
  border-radius: 0;
}
.uploadImg .text {
  font-size: 35px;
}
.moreImg {
  width: 100%;
  height: 155px;
  border-radius: 10px;
  background-color: rgba(255, 206, 132);
  text-align: center;
  line-height: 155px;
  font-size: 38px;
  color: white;
}
.container {
  width: 97%;
  margin: 0 auto;
  padding-bottom: 140px;
}
.pre_image {
  margin: 0 auto;
  width: 100%;
  height: 700px;
  border-radius: 10px;
}
.iconList {
  display: flex;
  justify-content: space-around;
}
.iconList img {
  width: 60px;
  height: 60px;
}
.iconList span {
  text-align: center;
  display: block;
  color: rgb(128, 126, 126);
}
</style>
